<!DOCTYPE html>
<html lang="en-us">
  <head i18n-values="dir:textdirection;">
  <!-- WebComponents V0 origin trial token for https://*.ui.perfetto.dev
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AjGFDFU57Af4e5OJJQd7kmYR0nEiObDCHkev6BBWzhGohACl1ri+pMhaVe9V8dDBaXDkWy4g7WYj3c5GiPwatgIAAABreyJvcmlnaW4iOiJodHRwczovL3VpLnBlcmZldHRvLmRldjo0NDMiLCJmZWF0dXJlIjoiV2ViQ29tcG9uZW50c1YwIiwiZXhwaXJ5IjoxNjEyMjIzOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">

  <!-- WebComponents V0 origin trial token for http://localhost:10000
  Expires 28 Jan 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AicMEv5glMGL1lq6ZRsxFJj8xlhn3XDYZrHK0/2KreAD/r62vTFjUBOueeMTxWuU1IlRXqCugRFDD7rY45YEgwkAAABTeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjEwMDAwIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMTg0MDczNH0=">

  <!-- WebComponents V0 origin trial token for https://staging-dot-perfetto-ui.appspot.com
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="Au1cwnWfBB/GCD22HnNZE93/KamhGDsz8BZbEewICJB2PRtW+E1bobrtZbTZs8q5748uRiKXPvgaut5JOZ8jSw4AAABseyJvcmlnaW4iOiJodHRwczovL3N0YWdpbmctZG90LXBlcmZldHRvLXVpLmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJDb21wb25lbnRzVjAiLCJleHBpcnkiOjE2MTIyMjM5OTl9">

  <!-- WebComponents V0 origin trial token for https://storage.googleapis.com/
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AtobKUpdVFIb6cx2Ev0EbAFX4SzLuXPnsnADRA8JV5w4B64q65gz42shquyLLNd2QP9rY22oNGxbatpTO0kd2AIAAABfeyJvcmlnaW4iOiJodHRwczovL3N0b3JhZ2UuZ29vZ2xlYXBpcy5jb206NDQzIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMjIyMzk5OX0=">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta http-equiv="origin-trial" content="AnYuQDtUf6OrWCmR9Okd67JhWVTbmnRedvPi1TEvAxac8+1p6o9q08FoDO6oCbLD0xEqev+SkZFiIhFSzlY9HgUAAABxeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXVzZXJjb250ZW50LmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViQ29tcG9uZW50c1YwIiwiZXhwaXJ5IjoxNjA0NjE0NTM4LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
  <meta http-equiv="origin-trial" content="AkFXw3wHnOs/XXYqFXpc3diDLrRFd9PTgGs/gs43haZmngI/u1g8L4bDnSKLZkB6fecjmjTwcAMQFCpWMAoHSQEAAAB8eyJvcmlnaW4iOiJodHRwczovL2Nocm9taXVtLWJ1aWxkLXN0YXRzLmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJDb21wb25lbnRzVjAiLCJleHBpcnkiOjE2MTIyMjM5OTksImlzU3ViZG9tYWluIjp0cnVlfQ==">
  <meta http-equiv="origin-trial" content="AtQY4wpX9+nj+Vn27cTgygzIPbtB2WoAoMQR5jK9mCm/H2gRIDH6MmGVAaziv9XnYTDKjhBnQYtecbTiIHCQiAIAAACEeyJvcmlnaW4iOiJodHRwczovL2Nocm9taXVtLWJ1aWxkLXN0YXRzLXN0YWdpbmcuYXBwc3BvdC5jb206NDQzIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMjIyMzk5OSwiaXNTdWJkb21haW4iOnRydWV9">
  <title>chrome://tracing</title>
  <template id="overlay-template">
  <style>
    overlay-mask {
      left: 0;
      padding: 8px;
      position: absolute;
      top: 0;
      z-index: 1000;
      font-family: sans-serif;
      -webkit-justify-content: center;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
    }
    overlay-mask:focus {
      outline: none;
    }
    overlay-vertical-centering-container {
      -webkit-justify-content: center;
      flex-direction: column;
      display: flex;
    }
    overlay-frame {
      z-index: 1100;
      background: rgb(255, 255, 255);
      border: 1px solid #ccc;
      margin: 75px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    title-bar {
      -webkit-align-items: center;
      flex-direction: row;
      border-bottom: 1px solid #ccc;
      background-color: #ddd;
      display: flex;
      padding: 5px;
      flex: 0 0 auto;
    }
    title {
      display: inline;
      font-weight: bold;
      flex: 1 1 auto;
    }
    close-button {
      -webkit-align-self: flex-end;
      border: 1px solid #eee;
      background-color: #999;
      font-size: 10pt;
      font-weight: bold;
      padding: 2px;
      text-align: center;
      width: 16px;
    }
    close-button:hover {
      background-color: #ddd;
      border-color: black;
      cursor: pointer;
    }
    overlay-content {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      overflow-y: auto;
      padding: 10px;
      min-width: 300px;
      min-height: 0;
    }
    button-bar {
      -webkit-align-items: baseline;
      border-top: 1px solid #ccc;
      display: flex;
      flex: 0 0 auto;
      flex-direction: row-reverse;
      padding: 4px;
    }
  </style>

  <overlay-mask>
    <overlay-vertical-centering-container>
      <overlay-frame>
        <title-bar>
          <title></title>
          <close-button>✕</close-button>
        </title-bar>
        <overlay-content>
          <content></content>
        </overlay-content>
        <button-bar></button-bar>
      </overlay-frame>
    </overlay-vertical-centering-container>
  </overlay-mask>
</template><dom-module id="tv-ui-b-hotkey-controller">
  <template>
    <div></div>
  </template>
</dom-module><dom-module id="tr-ui-b-info-bar">
  <template>
    <style>
    :host {
      align-items: center;
      flex: 0 0 auto;
      background-color: rgb(252, 235, 162);
      border-bottom: 1px solid #A3A3A3;
      border-left: 1px solid white;
      border-right: 1px solid #A3A3A3;
      border-top: 1px solid white;
      display: flex;
      min-height: 26px;
      padding: 0 3px 0 3px;
    }

    :host([hidden]) {
      display: none !important;
    }

    #message { flex: 1 1 auto; }
    </style>

    <span id="message"></span>
    <span id="buttons"></span>
  </template>
</dom-module><dom-module id="tr-ui-b-info-bar-group">
  <template>
    <style>
    :host {
      flex: 0 0 auto;
      flex-direction: column;
      display: flex;
    }
    </style>
    <div id="messages"></div>
  </template>
</dom-module><template id="record-selection-dialog-template">
  <style>
  .categories-column-view {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    max-width: 640px;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    transition: max-height 1s ease, max-width 1s ease, opacity 1s ease;
    will-change: opacity;
  }

  .categories-column-view-hidden {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    display: none;
  }

  .categories-selection {
    display: flex;
    flex-direction: row;
  }

  .category-presets {
    padding: 4px;
  }

  .category-description {
    color: #aaa;
    font-size: small;
    max-height: 1em;
    opacity: 1;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
    transition: max-height 1s ease, opacity 1s ease;
    will-change: opacity;
  }

  .category-description-hidden {
    max-height: 0;
    opacity: 0;
  }

  .default-enabled-categories,
  .default-disabled-categories {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 4px;
    width: 300px;
  }

  .default-enabled-categories > div,
  .default-disabled-categories > div {
    padding: 4px;
  }

  .tracing-modes {
    flex: 1 0 auto;
    display: flex;
    flex-direction: reverse;
    padding: 4px;
    border-bottom: 2px solid #ddd;
    border-top: 2px solid #ddd;
  }

  .default-disabled-categories {
    border-left: 2px solid #ddd;
  }

  .warning-default-disabled-categories {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    color: #BD2E2E;
    width: 2.0ex;
    height: 2.0ex;
    border-radius: 2.0ex;
    border: 1px solid #BD2E2E;
  }

  .categories {
    font-size: 80%;
    padding: 10px;
    flex: 1 1 auto;
  }

  .group-selectors {
    font-size: 80%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
    flex: 0 0 auto;
  }

  .group-selectors button {
    padding: 1px;
  }

  .record-selection-dialog .labeled-option-group {
    flex: 0 0 auto;
    flex-direction: column;
    display: flex;
  }

  .record-selection-dialog .labeled-option {
    border-top: 5px solid white;
    border-bottom: 5px solid white;
  }

  .record-selection-dialog .edit-categories {
    padding-left: 6px;
  }

  .record-selection-dialog .edit-categories:after {
    padding-left: 15px;
    font-size: 125%;
  }

  .record-selection-dialog .labeled-option-group:not(.categories-expanded)
      .edit-categories:after {
    content: '\25B8'; /* Right triangle */
  }

  .record-selection-dialog .labeled-option-group.categories-expanded
      .edit-categories:after {
    content: '\25BE'; /* Down triangle */
  }

  </style>

  <div class="record-selection-dialog">
    <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group>
    <div class="category-presets">
    </div>
    <div class="category-description"></div>
    <div class="categories-column-view">
      <div class="tracing-modes"></div>
      <div class="categories-selection">
        <div class="default-enabled-categories">
          <div>Record Categories</div>
          <div class="group-selectors">
            Select
            <button class="all-btn">All</button>
            <button class="none-btn">None</button>
          </div>
          <div class="categories"></div>
        </div>
        <div class="default-disabled-categories">
          <div>Disabled by Default Categories
            <a class="warning-default-disabled-categories">!</a>
          </div>
          <div class="group-selectors">
            Select
            <button class="all-btn">All</button>
            <button class="none-btn">None</button>
          </div>
          <div class="categories"></div>
        </div>
      </div>
    </div>
  </div>
</template><dom-module id="tr-ui-a-analysis-link">
  <template>
    <style>
    :host {
      display: inline;
      cursor: pointer;
      cursor: pointer;
      white-space: nowrap;
    }
    a {
      text-decoration: underline;
    }
    </style>
    <a href="{{href}}" on-click="onClicked_" on-mouseenter="onMouseEnter_" on-mouseleave="onMouseLeave_"><slot></slot></a>

  </template>
</dom-module><dom-module id="tr-ui-b-table">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      table {
        flex: 1 1 auto;
        align-self: stretch;
        border-collapse: separate;
        border-spacing: 0;
        border-width: 0;
        -webkit-user-select: initial;
      }

      tr > td {
        padding: 2px 4px 2px 4px;
        vertical-align: top;
      }

      table > tbody:focus {
        outline: none;
      }
      table > tbody:focus[selection-mode="row"] > tr[selected],
      table > tbody:focus[selection-mode="cell"] > tr > td[selected],
      table > tbody:focus > tr.empty-row > td {
        outline: 1px dotted #666666;
        outline-offset: -1px;
      }

      button.toggle-button {
        height: 15px;
        line-height: 60%;
        vertical-align: middle;
        width: 100%;
      }

      button > * {
        height: 15px;
        vertical-align: middle;
      }

      td.button-column {
        width: 30px;
      }

      table > thead > tr > td.sensitive:hover {
        background-color: #fcfcfc;
      }

      table > thead > tr > td {
        font-weight: bold;
        text-align: left;

        background-color: #eee;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #aaa;
      }

      table > tfoot {
        background-color: #eee;
        font-weight: bold;
      }

      /* Light row and cell highlight. */
      table > tbody[row-highlight-style="light"] > tr[selected],
      table > tbody[cell-highlight-style="light"] > tr > td[selected] {
        background-color: rgb(213, 236, 229);  /* light turquoise */
      }
      table > tbody[row-highlight-style="light"] >
          tr:not(.empty-row):not([selected]):hover,
      table > tbody[cell-highlight-style="light"] >
          tr:not(.empty-row):not([selected]) > td:hover {
        background-color: #f6f6f6;  /* light grey */
      }

      /* Dark row and cell highlight. */
      table > tbody[row-highlight-style="dark"] > tr[selected],
      table > tbody[cell-highlight-style="dark"] > tr > td[selected] {
        background-color: rgb(103, 199, 165);  /* turquoise */
      }
      table > tbody[row-highlight-style="dark"] >
          tr:not(.empty-row):not([selected]):hover,
      table > tbody[cell-highlight-style="dark"] >
          tr:not(.empty-row):not([selected]) > td:hover {
        background-color: #e6e6e6;  /* grey */
      }
      table > tbody[row-highlight-style="dark"] > tr:hover[selected],
      table > tbody[cell-highlight-style="dark"] > tr[selected] > td:hover {
        background-color: rgb(171, 217, 202);  /* semi-light turquoise */
      }

      table > colgroup > col[selected] {
        background-color: #e6e6e6;  /* grey */
      }

      table > tbody > tr.empty-row > td {
        color: #666;
        font-style: italic;
        text-align: center;
      }

      table > tbody.has-footer > tr:last-child > td {
        border-bottom: 1px solid #aaa;
      }

      table > tfoot > tr:first-child > td {
        border-top: 1px solid #ffffff;
      }

      :host([zebra]) table tbody tr:nth-child(even) {
        background-color: #f4f4f4;
      }

      expand-button {
        -webkit-user-select: none;
        cursor: pointer;
        margin-right: 3px;
        font-size: smaller;
        height: 1rem;
      }

      expand-button.button-expanded {
        transform: rotate(90deg);
      }
    </style>
    <table>
      <colgroup id="cols">
      </colgroup>
      <thead id="head">
      </thead>
      <tbody id="body">
      </tbody>
      <tfoot id="foot">
      </tfoot>
    </table>
  </template>
</dom-module><dom-module id="tr-ui-b-table-header-cell">
  <template>
  <style>
    :host {
      -webkit-user-select: none;
      display: flex;
    }

    span {
      flex: 0 1 auto;
    }

    #side {
      -webkit-user-select: none;
      flex: 0 0 auto;
      padding-left: 2px;
      padding-right: 2px;
      vertical-align: top;
      font-size: 15px;
      font-family: sans-serif;
      line-height: 85%;
      margin-left: 5px;
    }

    #side.disabled {
      color: rgb(140, 140, 140);
    }

    #title:empty, #side:empty {
      display: none;
    }
  </style>

    <span id="title"></span>
    <span id="side"></span>
  </template>
</dom-module><dom-module id="tr-ui-a-alert-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-v-ui-scalar-context-controller">
  <template></template>
</dom-module><dom-module id="tr-v-ui-scalar-span">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      position: relative;
      /* Limit the sparkline's negative z-index to the span only. */
      isolation: isolate;
    }

    :host(.left-align) {
      justify-content: flex-start;
    }

    :host(.inline) {
      display: inline-flex;
    }

    #sparkline {
      width: 0%;
      position: absolute;
      bottom: 0;
      display: none;
      height: 100%;
      background-color: hsla(216, 100%, 94.5%, .75);
      border-color: hsl(216, 100%, 89%);
      box-sizing: border-box;
      z-index: -1;
    }
    #sparkline.positive {
      border-right-style: solid;
      /* The border width must be kept in sync with buildSparklineStyle_(). */
      border-right-width: 1px;
    }
    #sparkline:not(.positive) {
      border-left-style: solid;
      /* The border width must be kept in sync with buildSparklineStyle_(). */
      border-left-width: 1px;
    }
    #sparkline.better {
      background-color: hsla(115, 100%, 93%, .75);
      border-color: hsl(118, 60%, 80%);
    }
    #sparkline.worse {
      background-color: hsla(0, 100%, 88%, .75);
      border-color: hsl(0, 100%, 80%);
    }

    #content {
      white-space: nowrap;
    }
    #content, #significance, #warning {
      flex-grow: 0;
    }
    #content.better {
      color: green;
    }
    #content.worse {
      color: red;
    }

    #significance svg {
      margin-left: 4px;
      display: none;
      height: 1em;
      vertical-align: text-top;
      stroke-width: 4;
      fill: rgba(0, 0, 0, 0);
    }
    #significance #insignificant {
      stroke: black;
    }
    #significance #significantly_better {
      stroke: green;
    }
    #significance #significantly_worse {
      stroke: red;
    }

    #warning {
      display: none;
      margin-left: 4px;
      height: 1em;
      vertical-align: text-top;
      stroke-width: 0;
    }
    #warning path {
      fill: rgb(255, 185, 185);
    }
    #warning rect {
      fill: red;
    }
    </style>

    <span id="sparkline"></span>

    <span id="content"></span>

    <span id="significance">
      
      <svg id="insignificant" viewBox="0 0 128 128">
        <circle cx="64" cy="64" r="60"></circle>
        <circle cx="44" cy="44" r="4"></circle>
        <circle cx="84" cy="44" r="4"></circle>
        <line x1="36" x2="92" y1="80" y2="80"></line>
      </svg>

      
      <svg id="significantly_better" viewBox="0 0 128 128">
        <circle cx="64" cy="64" r="60"></circle>
        <circle cx="44" cy="44" r="4"></circle>
        <circle cx="84" cy="44" r="4"></circle>
        <path d="M 28 64 Q 64 128 100 64"></path>
      </svg>

      
      <svg id="significantly_worse" viewBox="0 0 128 128">
        <circle cx="64" cy="64" r="60"></circle>
        <circle cx="44" cy="44" r="4"></circle>
        <circle cx="84" cy="44" r="4"></circle>
        <path d="M 36 96 Q 64 48 92 96"></path>
      </svg>
    </span>

    <svg id="warning" viewBox="0 0 128 128">
      <path d="M 64 0 L 128 128 L 0 128 L 64 0"></path>
      <rect height="84" width="8" x="60" y="0"></rect>
      <rect height="24" width="8" x="60" y="100"></rect>
    </svg>
  </template>
</dom-module><dom-module id="tr-ui-b-tab-view">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #selection_description, #tabs {
        font-size: 12px;
      }

      #selection_description {
        display: inline-block;
        font-weight: bold;
        margin: 9px 0px 4px 20px;
      }

      #tabs {
        flex: 0 0 auto;
        border-top: 1px solid #8e8e8e;
        border-bottom: 1px solid #8e8e8e;
        background-color: #ececec;
        overflow: hidden;
        margin: 0;
      }

      #tabs input[type=radio] {
        display: none;
      }

      #tabs tab label {
        cursor: pointer;
        display: inline-block;
        border: 1px solid #ececec;
        margin: 5px 0px 0px 15px;
        padding: 3px 10px 3px 10px;
      }

      #tabs tab label span {
        font-weight: bold;
      }

      #tabs:focus input[type=radio]:checked ~ label {
        outline: dotted 1px #8e8e8e;
        outline-offset: -2px;
      }

      #tabs input[type=radio]:checked ~ label {
        background-color: white;
        border: 1px solid #8e8e8e;
        border-bottom: 1px solid white;
      }

      #subView {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
      }

      #subView > * {
        flex: 1 1 auto;
        min-width: 0;
      }
    </style>
    <div hidden="[[tabsHidden]]" id="tabs">
      <label id="selection_description">[[label_]]</label>
      <template is="dom-repeat" items="[[subViews_]]">
        <tab>
          <input checked="[[isChecked_(item)]]" id$="[[computeRadioId_(item)]]" name="tabs" on-change="onTabChanged_" type="radio"/>
          <label for$="[[computeRadioId_(item)]]">
            <template if="[[item.tabIcon]]" is="dom-if">
              <span style$="[[item.tabIcon.style]]">[[item.tabIcon.text]]</span>
            </template>
            [[item.tabLabel]]
          </label>
        </tab>
      </template>
    </div>
    <div id="subView"></div>
    <slot>
    </slot>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-breakdown-view">
  <template>
    <tr-ui-b-tab-view id="tabs"></tr-ui-b-tab-view>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-breakdown-view-tab">
  <template>
    <tr-v-ui-scalar-context-controller></tr-v-ui-scalar-context-controller>
    <tr-ui-b-info-bar hidden="" id="info"></tr-ui-b-info-bar>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-path-view">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }
    </style>
    <tr-v-ui-scalar-context-controller></tr-v-ui-scalar-context-controller>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-b-drag-handle">
  <template>
    <style>
    :host {
      -webkit-user-select: none;
      box-sizing: border-box;
      display: block;
    }

    :host(.horizontal-drag-handle) {
      background-image: -webkit-gradient(linear,
                                         0 0, 0 100%,
                                         from(#E5E5E5),
                                         to(#D1D1D1));
      border-bottom: 1px solid #8e8e8e;
      border-top: 1px solid white;
      cursor: ns-resize;
      flex: 0 0 auto;
      height: 7px;
      position: relative;
    }

    :host(.vertical-drag-handle) {
      background-image: -webkit-gradient(linear,
                                         0 0, 100% 0,
                                         from(#E5E5E5),
                                         to(#D1D1D1));
      border-left: 1px solid white;
      border-right: 1px solid #8e8e8e;
      cursor: ew-resize;
      flex: 0 0 auto;
      position: relative;
      width: 7px;
    }
    </style>
    <div></div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #header {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;
      }

      #label {
        flex: 1 1 auto;
        padding: 8px;
        font-size: 15px;
        font-weight: bold;
      }

      #view_mode_container {
        display: none;
        flex: 0 0 auto;
        padding: 5px;
        font-size: 15px;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #split_view {
        display: none;  /* Hide until memory allocator dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        flex-direction: row;
      }

      #path_view {
        width: 50%;
      }

      #breakdown_view {
        flex: 1 1 auto;
        width: 0;
      }

      #path_view, #breakdown_view {
        overflow-x: auto;  /* Show scrollbar if necessary. */
      }
    </style>
    <div id="header">
      <div id="label">Heap details</div>
      <div id="view_mode_container">
        <span>View mode:</span>
        
      </div>
    </div>
    <div id="contents">
      <tr-ui-b-info-bar hidden="" id="info_bar">
      </tr-ui-b-info-bar>

      <div id="info_text">No heap dump selected</div>

      <div id="split_view">
        <tr-ui-a-memory-dump-heap-details-path-view id="path_view">
        </tr-ui-a-memory-dump-heap-details-path-view>
        <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
        <tr-ui-a-memory-dump-heap-details-breakdown-view id="breakdown_view">
        </tr-ui-a-memory-dump-heap-details-breakdown-view>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-allocator-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #table {
        display: none;  /* Hide until memory allocator dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }
    </style>
    <div id="label">Component details</div>
    <div id="contents">
      <div id="info_text">No memory allocator dump selected</div>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-vm-regions-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #table {
        display: none;  /* Hide until memory dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }
    </style>
    <div id="label">Memory maps</div>
    <div id="contents">
      <div id="info_text">No memory maps selected</div>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-b-color-legend">
  <template>
    <style>
    :host {
      display: inline-block;
    }

    #square {
      font-size: 150%;  /* Make the square bigger. */
      line-height: 0%;  /* Prevent the square from increasing legend height. */
    }
    </style>
    <span id="square"></span>
    <span id="label"></span>
  </template>
</dom-module><dom-module id="tr-ui-b-view-specific-brushing-state">
  <template></template>
</dom-module><dom-module id="tr-ui-a-memory-dump-overview-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #label a {
        font-weight: normal;
        float: right;
      }

      #contents {
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
        overflow: auto;
      }

      #info_text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }

      #table {
        display: none;  /* Hide until memory dumps are set. */
        flex: 1 0 auto;
        align-self: stretch;
        font-size: 12px;
      }
    </style>
    <tr-ui-b-view-specific-brushing-state id="state" view-id="analysis.memory_dump_overview_pane">
    </tr-ui-b-view-specific-brushing-state>
    <div id="label">Overview <a href="https://chromium.googlesource.com/chromium/src/+/master/docs/memory-infra">Help</a></div>
    <div id="contents">
      <div id="info_text">No memory memory dumps selected</div>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-memory-dump-header-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: row;
        align-items: center;

        background-color: #d0d0d0;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;
      }

      #label {
        flex: 1 1 auto;
        padding: 6px;
        font-size: 15px;
      }

      #aggregation_mode_container {
        display: none;
        flex: 0 0 auto;
        padding: 5px;
        font-size: 15px;
      }
    </style>
    
    <div id="label"></div>
    <div id="aggregation_mode_container">
      <span>Metric aggregation:</span>
      
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-stacked-pane-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }

    #pane_container > * {
      flex: 0 0 auto;
    }
    </style>
    <div id="pane_container">
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-container-memory-dump-sub-view">
  <template>
    <style>
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-counter-sample-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-event-summary-table">
  <template>
    <style>
    :host {
      display: flex;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
    
  </template>
</dom-module><dom-module id="tr-ui-a-selection-summary-table">
  <template>
    <style>
    :host {
      display: flex;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
    
  </template>
</dom-module><dom-module id="tr-ui-b-radio-picker">
  <template>
    <style>
    :host([vertical]) #container {
      flex-direction: column;
    }
    :host(:not[vertical]) #container {
      flex-direction: row;
    }
    #container {
      display: flex;
    }
    #container > div {
      padding-left: 1em;
      padding-bottom: 0.5em;
    }
    </style>
    <div id="container"></div>
  </template>
</dom-module><dom-module id="tr-ui-b-chart-legend-key">
  <template>
    <style>
      #checkbox {
        margin: 0;
        visibility: hidden;
        vertical-align: text-top;
      }
      #label, #link {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
      }
    </style>

    <input checked="" id="checkbox" type="checkbox"/>
    <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
    <label id="label"></label>
  </template>
</dom-module><template id="chart-base-template">
  <svg> 
    <g id="chart-area" xmlns="http://www.w3.org/2000/svg">
      <g class="x axis"></g>
      <g class="y axis"></g>
      <text id="title"></text>
    </g>
  </svg>
</template><dom-module id="tr-v-ui-breakdown-span">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table_container {
      display: flex;
      flex: 0 0 auto;
    }
    #table {
      max-height: 150px;
      overflow-y: auto;
    }
    </style>

    <div id="empty">(empty)</div>
    <div id="table_container">
      <div id="container"></div>
      <span>
        <tr-ui-b-table id="table"></tr-ui-b-table>
      </span>
    </div>
  </template>
</dom-module><dom-module id="tr-v-ui-collected-related-event-set-span">
</dom-module><dom-module id="tr-v-ui-date-range-span">
  <template>
    <content></content>
  </template>
</dom-module><dom-module id="tr-ui-a-generic-object-view">
  <template>
    <style>
    :host {
      display: block;
      font-family: monospace;
    }
    </style>
    <div id="content">
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-generic-object-view-with-label">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
  </template>
</dom-module><dom-module id="tr-v-ui-generic-set-span">
  <template>
    <style>
      a {
        display: block;
      }
    </style>

    <tr-ui-a-generic-object-view id="generic"></tr-ui-a-generic-object-view>

    <div id="links"></div>
  </template>
</dom-module><dom-module id="tr-v-ui-related-event-set-span">
</dom-module><dom-module id="tr-v-ui-scalar-diagnostic-span">
  <template>
    <tr-v-ui-scalar-span id="scalar"></tr-v-ui-scalar-span>
  </template>
</dom-module><dom-module id="tr-v-ui-unmergeable-diagnostic-set-span">
</dom-module><dom-module id="tr-v-ui-diagnostic-map-table">
  <template>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-v-ui-scalar-map-table">
  <template>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-span">
  <template>
    <style>
    #container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    #chart {
      flex-grow: 1;
      display: none;
    }
    #drag_handle, #diagnostics_tab_templates {
      display: none;
    }
    #chart svg {
      display: block;
    }
    #stats_container {
      overflow-y: auto;
    }
    </style>

    <div id="container">
      <div id="chart"></div>
      <div id="stats_container">
        <tr-v-ui-scalar-map-table id="stats"></tr-v-ui-scalar-map-table>
      </div>
    </div>
    <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>

    <tr-ui-b-tab-view id="diagnostics"></tr-ui-b-tab-view>

    <div id="diagnostics_tab_templates">
      <tr-v-ui-diagnostic-map-table id="metric_diagnostics"></tr-v-ui-diagnostic-map-table>

      <tr-v-ui-diagnostic-map-table id="metadata_diagnostics"></tr-v-ui-diagnostic-map-table>

      <div id="sample_diagnostics_container">
        <div id="merge_sample_diagnostics_container">
          <input checked="" id="merge_sample_diagnostics" on-change="updateDiagnostics_" type="checkbox"/>
          <label for="merge_sample_diagnostics">Merge Sample Diagnostics</label>
        </div>
        <tr-v-ui-diagnostic-map-table id="sample_diagnostics"></tr-v-ui-diagnostic-map-table>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-event-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      overflow: auto;
    }
    #content {
      display: flex;
      flex-direction: column;
      flex: 0 1 auto;
      align-self: stretch;
    }
    #content > * {
      flex: 0 0 auto;
      align-self: stretch;
    }
    #histogramContainer {
      display: flex;
    }

    tr-ui-a-multi-event-summary-table {
      border-bottom: 1px solid #aaa;
    }

    tr-ui-a-selection-summary-table  {
      margin-top: 1.25em;
      border-top: 1px solid #aaa;
      background-color: #eee;
      font-weight: bold;
      margin-bottom: 1.25em;
      border-bottom: 1px solid #aaa;
    }
    </style>
    <div id="content">
      <tr-ui-a-multi-event-summary-table id="eventSummaryTable">
      </tr-ui-a-multi-event-summary-table>
      <tr-ui-a-selection-summary-table id="selectionSummaryTable">
      </tr-ui-a-selection-summary-table>
      <tr-ui-b-radio-picker id="radioPicker">
      </tr-ui-b-radio-picker>
      <div id="histogramContainer">
        <tr-v-ui-histogram-span id="histogramSpan">
        </tr-v-ui-histogram-span>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-related-events">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-async-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #container {
      display: flex;
      flex: 1 1 auto;
    }
    #events {
      margin-left: 8px;
      flex: 0 1 200px;
    }
    </style>
    <div id="container">
      <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
      <div id="events">
        <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-cpu-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #content {
      flex: 1 1 auto;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-flow-event-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-instant-event-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-object-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="content"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-frame-power-usage-chart">
  <template>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-power-sample-summary-table">
  <template>
    <style>
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-power-sample-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #tables {
      display: flex;
      flex-direction: column;
      width: 50%;
    }
    #chart {
      width: 50%;
    }
    </style>
    <div id="tables">
      <tr-ui-a-power-sample-summary-table id="summaryTable">
      </tr-ui-a-power-sample-summary-table>
    </div>
    <tr-ui-a-frame-power-usage-chart id="chart">
    </tr-ui-a-frame-power-usage-chart>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-sample-sub-view">
  <template>
    <style>
    :host { display: block; }
    #control {
      background-color: #e6e6e6;
      background-image: -webkit-gradient(linear, 0 0, 0 100%,
                                         from(#E5E5E5), to(#D1D1D1));
      flex: 0 0 auto;
      overflow-x: auto;
    }
    #control::-webkit-scrollbar { height: 0px; }
    #control {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      margin: 1px;
      margin-right: 2px;
    }
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <div id="control">
      Sample View Option
    </div>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-thread-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #content {
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
    }
    #content > tr-ui-a-related-events {
      margin-left: 8px;
      flex: 0 1 200px;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-thread-time-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
    }
    #content {
      flex: 1 1 auto;
      min-width: 0;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-user-expectation-related-samples-table">
  <template>
    <style>
    #table {
      flex: 1 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-multi-user-expectation-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex: 1 1 auto;
    }
    #events {
      margin-left: 8px;
      flex: 0 1 200px;
    }
    </style>
    <tr-ui-a-multi-event-sub-view id="realView"></tr-ui-a-multi-event-sub-view>
    <div id="events">
      <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-stack-frame">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-event-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex: 0 1;
      flex-direction: column;
    }
    #table {
      flex: 0 1 auto;
      align-self: stretch;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-async-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display:flex;
      flex-direction: column;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-cpu-slice-sub-view">
  <template>
    <style>
    table {
      border-collapse: collapse;
      border-width: 0;
      margin-bottom: 25px;
      width: 100%;
    }

    table tr > td:first-child {
      padding-left: 2px;
    }

    table tr > td {
      padding: 2px 4px 2px 4px;
      vertical-align: text-top;
      width: 150px;
    }

    table td td {
      padding: 0 0 0 0;
      width: auto;
    }
    tr {
      vertical-align: top;
    }

    tr:nth-child(2n+0) {
      background-color: #e2e2e2;
    }
    </style>
    <table>
      <tbody><tr>
        <td>Running process:</td><td id="process-name"></td>
      </tr>
      <tr>
        <td>Running thread:</td><td id="thread-name"></td>
      </tr>
      <tr>
        <td>Start:</td>
        <td>
          <tr-v-ui-scalar-span id="start">
          </tr-v-ui-scalar-span>
        </td>
      </tr>
      <tr>
        <td>Duration:</td>
        <td>
          <tr-v-ui-scalar-span id="duration">
          </tr-v-ui-scalar-span>
        </td>
      </tr>
      <tr>
        <td>Active slices:</td><td id="running-thread"></td>
      </tr>
      <tr>
        <td>Args:</td>
        <td>
          <tr-ui-a-generic-object-view id="args">
          </tr-ui-a-generic-object-view>
        </td>
      </tr>
    </tbody></table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-flow-event-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="singleEventSubView">
    </tr-ui-a-single-event-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-single-frame-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #asv {
      flex: 0 0 auto;
      align-self: stretch;
    }
    </style>
    <tr-ui-a-alert-sub-view id="asv">
    </tr-ui-a-alert-sub-view>
  </template>
</dom-module><dom-module id="tr-ui-a-single-instant-event-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-object-instance-sub-view">
  <template>
    <style>
    :host {
      display: block;
    }

    #snapshots > * {
      display: block;
    }

    :host {
      overflow: auto;
      display: block;
    }

    * {
      -webkit-user-select: text;
    }

    .title {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 110%;
      font-weight: bold;
    }

    td, th {
      font-family: monospace;
      vertical-align: top;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-object-snapshot-sub-view">
  <template>
    <style>
    #args {
      white-space: pre;
    }

    :host {
      overflow: auto;
      display: flex;
    }

    ::content * {
      -webkit-user-select: text;
    }

    ::content .title {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 110%;
      font-weight: bold;
    }

    ::content td, th {
      font-family: monospace;
      vertical-align: top;
    }
    </style>
    <slot></slot>
  </template>
</dom-module><dom-module id="tr-ui-a-power-sample-table">
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-power-sample-sub-view">
  <template>
    <style>
    :host { display: block; }
    </style>
    <tr-ui-a-power-sample-table id="samplesTable">
    </tr-ui-a-power-sample-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-sample-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="content"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-thread-slice-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display: flex;
      flex-direction: column;
    }

    </style>
    <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-related-events id="relatedEvents">
      </tr-ui-a-related-events>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-single-thread-time-slice-sub-view">
  <template>
    <style>
    table {
      border-collapse: collapse;
      border-width: 0;
      margin-bottom: 25px;
      width: 100%;
    }

    table tr > td:first-child {
      padding-left: 2px;
    }

    table tr > td {
      padding: 2px 4px 2px 4px;
      vertical-align: text-top;
      width: 150px;
    }

    table td td {
      padding: 0 0 0 0;
      width: auto;
    }
    tr {
      vertical-align: top;
    }

    tr:nth-child(2n+0) {
      background-color: #e2e2e2;
    }
    </style>
    <table>
      <tbody><tr>
        <td>Running process:</td><td id="process-name"></td>
      </tr>
      <tr>
        <td>Running thread:</td><td id="thread-name"></td>
      </tr>
      <tr>
        <td>State:</td>
        <td><b><span id="state"></span></b></td>
      </tr>
      <tr>
        <td>Start:</td>
        <td>
          <tr-v-ui-scalar-span id="start">
          </tr-v-ui-scalar-span>
        </td>
      </tr>
      <tr>
        <td>Duration:</td>
        <td>
          <tr-v-ui-scalar-span id="duration">
          </tr-v-ui-scalar-span>
        </td>
      </tr>

      <tr>
        <td>On CPU:</td><td id="on-cpu"></td>
      </tr>

      <tr>
        <td>Running instead:</td><td id="running-instead"></td>
      </tr>

      <tr>
        <td>Args:</td><td id="args"></td>
      </tr>
    </tbody></table>
  </template>
</dom-module><dom-module id="tr-ui-a-single-user-expectation-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display: flex;
      flex-direction: column;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="realView"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-a-analysis-view">
  <template>
    <style>
      :host {
        background-color: white;
        display: flex;
        flex-direction: column;
        height: 275px;
        overflow: auto;
      }

      :host(.tall-mode) {
        height: 525px;
      }
    </style>
    <slot></slot>
  </template>
</dom-module><dom-module id="tr-ui-b-dropdown">
  <template>
    <style>
    button {
      @apply --dropdown-button;
    }
    button.open {
      @apply --dropdown-button-open;
    }
    dialog {
      position: absolute;
      margin: 0;
      padding: 1em;
      border: 1px solid darkgrey;
      @apply --dropdown-dialog;
    }
    </style>

    <button id="button" on-tap="open">[[label]]</button>

    <dialog id="dialog" on-cancel="close" on-tap="onDialogTap_">
      <slot></slot>
    </dialog>
  </template>
</dom-module><dom-module id="tr-ui-b-toolbar-button">
  <template>
    <style>
    :host {
      display: flex;
      background-color: #f8f8f8;
      border: 1px solid rgba(0, 0, 0, 0.5);
      color: rgba(0,0,0,0.8);
      justify-content: center;
      align-self: stretch;
      min-width: 23px;
    }

    :host(:hover) {
      background-color: rgba(255, 255, 255, 1.0);
      border-color: rgba(0, 0, 0, 0.8);
      box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
      color: rgba(0, 0, 0, 1);
    }

    #aligner {
      display: flex;
      flex: 0 0 auto;
      align-self: center;
    }
    </style>
    <div id="aligner">
      <slot></slot>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-b-mouse-mode-icon">
  <template>
    <style>
    :host {
      display: block;
      background-image: url();
      width: 27px;
      height: 30px;
    }
    :host.active {
      cursor: auto;
    }
    </style>
  </template>
</dom-module><dom-module id="tr-ui-b-mouse-mode-selector">
  <template>
    <style>
    :host {

      -webkit-user-drag: element;
      -webkit-user-select: none;

      background: #DDD;
      border: 1px solid #BBB;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      left: calc(100% - 120px);
      position: absolute;
      top: 100px;
      user-select: none;
      width: 29px;
      z-index: 20;
    }

    .drag-handle {
      background: url() 2px 3px no-repeat;
      background-repeat: no-repeat;
      border-bottom: 1px solid #BCBCBC;
      cursor: move;
      display: block;
      height: 13px;
      width: 27px;
    }

    .tool-button {
      background-position: center center;
      background-repeat: no-repeat;
      border-bottom: 1px solid #BCBCBC;
      border-top: 1px solid #F1F1F1;
      cursor: pointer;
    }

    .buttons > .tool-button:last-child {
      border-bottom: none;
    }

    </style>
    <div class="drag-handle"></div>
    <div class="buttons">
    </div>
  </template>
</dom-module><style>
.track-button{background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.1);color:rgba(0,0,0,0.2);font-size:10px;height:12px;text-align:center;width:12px}.track-button:hover{background-color:rgba(255,255,255,1.0);border:1px solid rgba(0,0,0,0.5);box-shadow:0 0 .05em rgba(0,0,0,0.4);color:rgba(0,0,0,1)}.track-close-button{left:2px;position:absolute;top:2px}.track-collapse-button{left:3px;position:absolute;top:2px}
</style><style>
.drawing-container{display:inline;overflow:auto;overflow-x:hidden;position:relative}.drawing-container-canvas{display:block;pointer-events:none;position:absolute;top:0}
</style><dom-module id="tr-ui-b-heading">
  <template>
    <style>
    :host {
      background-color: rgb(243, 245, 247);
      border-right: 1px solid #8e8e8e;
      display: block;
      height: 100%;
      margin: 0;
      padding: 0 5px 0 0;
    }

    heading {
      display: block;
      overflow-x: hidden;
      text-align: left;
      white-space: nowrap;
    }

    #arrow {
      flex: 0 0 auto;
      font-family: sans-serif;
      margin-left: 5px;
      margin-right: 5px;
      width: 8px;
    }

    #link, #heading_content {
      display: none;
    }
    </style>
    <heading id="heading" on-click="onHeadingDivClicked_">
  <!-- WebComponents V0 origin trial token for https://*.ui.perfetto.dev
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AjGFDFU57Af4e5OJJQd7kmYR0nEiObDCHkev6BBWzhGohACl1ri+pMhaVe9V8dDBaXDkWy4g7WYj3c5GiPwatgIAAABreyJvcmlnaW4iOiJodHRwczovL3VpLnBlcmZldHRvLmRldjo0NDMiLCJmZWF0dXJlIjoiV2ViQ29tcG9uZW50c1YwIiwiZXhwaXJ5IjoxNjEyMjIzOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">

  <!-- WebComponents V0 origin trial token for http://localhost:10000
  Expires 28 Jan 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AicMEv5glMGL1lq6ZRsxFJj8xlhn3XDYZrHK0/2KreAD/r62vTFjUBOueeMTxWuU1IlRXqCugRFDD7rY45YEgwkAAABTeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjEwMDAwIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMTg0MDczNH0=">

  <!-- WebComponents V0 origin trial token for https://staging-dot-perfetto-ui.appspot.com
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="Au1cwnWfBB/GCD22HnNZE93/KamhGDsz8BZbEewICJB2PRtW+E1bobrtZbTZs8q5748uRiKXPvgaut5JOZ8jSw4AAABseyJvcmlnaW4iOiJodHRwczovL3N0YWdpbmctZG90LXBlcmZldHRvLXVpLmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJDb21wb25lbnRzVjAiLCJleHBpcnkiOjE2MTIyMjM5OTl9">

  <!-- WebComponents V0 origin trial token for https://storage.googleapis.com/
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AtobKUpdVFIb6cx2Ev0EbAFX4SzLuXPnsnADRA8JV5w4B64q65gz42shquyLLNd2QP9rY22oNGxbatpTO0kd2AIAAABfeyJvcmlnaW4iOiJodHRwczovL3N0b3JhZ2UuZ29vZ2xlYXBpcy5jb206NDQzIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMjIyMzk5OX0=">
      <span id="arrow"></span>
      <span id="heading_content"></span>
      <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
    </heading>
  </template>
</dom-module><style>
.letter-dot-track {
  height: 18px;
}
</style><style>
.chart-track {
  height: 30px;
  position: relative;
}
</style><style>
.cpu-usage-track {
  height: 90px;
}
</style><style>
.power-series-track {
  height: 90px;
}
</style><style>
.spacing-track{height:4px}
</style><style>
.rect-track{height:18px}
</style><style>
.object-instance-track{height:18px}
</style><style>
.thread-track{flex-direction:column;display:flex;position:relative}
</style><style>
.process-track-header{display:flex;flex:0 0 auto;background-image:-webkit-gradient(linear,0 0,100% 0,from(#E5E5E5),to(#D1D1D1));border-bottom:1px solid #8e8e8e;border-top:1px solid white;font-size:75%}.process-track-name{flex-grow:1}.process-track-name:before{content:'\25B8';padding:0 5px}.process-track-base.expanded .process-track-name:before{content:'\25BE'}.process-track-close{color:black;border:1px solid transparent;padding:0px 2px}.process-track-close:hover{border:1px solid grey}
</style><style>
.model-track {
  flex-grow: 1;
}
</style><style>
.x-axis-track {
  height: 12px;
}

.x-axis-track.tall-mode {
  height: 30px;
}
</style><dom-module id="tr-ui-timeline-track-view">
  <template>
    <style>
    :host {
      flex-direction: column;
      display: flex;
      position: relative;
    }

    :host ::content * {
      -webkit-user-select: none;
      cursor: default;
    }

    #drag_box {
      background-color: rgba(0, 0, 255, 0.25);
      border: 1px solid rgb(0, 0, 96);
      font-size: 75%;
      position: fixed;
    }

    #hint_text {
      position: absolute;
      bottom: 6px;
      right: 6px;
      font-size: 8pt;
    }
    </style>
    <slot></slot>

    <div id="drag_box"></div>
    <div id="hint_text"></div>

    <tv-ui-b-hotkey-controller id="hotkey_controller">
    </tv-ui-b-hotkey-controller>
  </template>
</dom-module><dom-module id="tr-ui-find-control">
  <template>
    <style>
      :host {
        -webkit-user-select: none;
        display: flex;
        position: relative;
      }
      input {
        -webkit-user-select: auto;
        background-color: #f8f8f8;
        border: 1px solid rgba(0, 0, 0, 0.5);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 170px;
      }
      input:focus {
        background-color: white;
      }
      tr-ui-b-toolbar-button {
        border-left: none;
        margin: 0;
      }
      #hitCount {
        left: 0;
        opacity: 0.25;
        pointer-events: none;
        position: absolute;
        text-align: right;
        top: 2px;
        width: 167px;
        z-index: 1;
      }
      #spinner {
        visibility: hidden;
        width: 8px;
        height: 8px;
        left: 154px;
        pointer-events: none;
        position: absolute;
        top: 4px;
        z-index: 1;

        border: 2px solid transparent;
        border-bottom: 2px solid rgba(0, 0, 0, 0.5);
        border-right: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 50%;
      }
      @keyframes spin { 100% { transform: rotate(360deg); } }
    </style>

    <input id="filter" on-blur="filterBlur" on-focus="filterFocus" on-input="filterTextChanged" on-keydown="filterKeyDown" on-mouseup="filterMouseUp" type="text"/>
    <div id="spinner"></div>
    <tr-ui-b-toolbar-button on-click="findPrevious">
      ←
    </tr-ui-b-toolbar-button>
    <tr-ui-b-toolbar-button on-click="findNext">
      →
    </tr-ui-b-toolbar-button>
    <div id="hitCount">0 of 0</div>
  </template>
</dom-module><dom-module id="tr-ui-scripting-control">
  <template>
    <style>
      :host {
        flex: 1 1 auto;
      }
      .root {
        font-family: monospace;
        cursor: text;

        padding: 2px;
        margin: 2px;
        border: 1px solid rgba(0, 0, 0, 0.5);
        background: white;

        height: 100px;
        overflow-y: auto;

        transition-property: opacity, height, padding, margin;
        transition-duration: .2s;
        transition-timing-function: ease-out;
      }
      .hidden {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        height: 0px;
        opacity: 0;
      }
      .focused {
        outline: auto 5px -webkit-focus-ring-color;
      }
      #history {
        -webkit-user-select: text;
        color: #777;
      }
      #promptContainer {
        display: flex;
      }
      #promptMark {
        width: 1em;
        color: #468;
      }
      #prompt {
        flex: 1;
        width: 100%;
        border: none !important;
        background-color: inherit !important;
        font: inherit !important;
        text-overflow: clip !important;
        text-decoration: none !important;
      }
      #prompt:focus {
        outline: none;
      }
    </style>

    <div class="root hidden" id="root" on-focus="onConsoleFocus" tabindex="0">
      <div id="history"></div>
      <div id="promptContainer">
        <span id="promptMark">&gt;</span>
        <input id="prompt" on-blur="onConsoleBlur" on-keydown="promptKeyDown" on-keypress="promptKeyPress" type="text"/>
       </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-side-panel-container">
  <template>
    <style>
    :host {
      align-items: stretch;
      display: flex;
      background-color: white;
    }

    :host([expanded]) > #side_panel_drag_handle,
    :host([expanded]) > active-panel-container {
      flex: 1 1 auto;
      border-left: 1px solid black;
      display: flex;
    }

    :host(:not([expanded])) > #side_panel_drag_handle,
    :host(:not([expanded])) > active-panel-container {
      display: none;
    }

    active-panel-container {
      display: flex;
    }

    tab-strip {
      flex: 0 0 auto;
      flex-direction: column;
      -webkit-user-select: none;
      background-color: rgb(236, 236, 236);
      border-left: 1px solid black;
      cursor: default;
      display: flex;
      min-width: 18px; /* workaround for flexbox and writing-mode mixing bug */
      padding: 10px 0 10px 0;
      font-size: 12px;
    }

    tab-strip > tab-strip-label {
      flex-shrink: 0;
      -webkit-writing-mode: vertical-rl;
      white-space: nowrap;
      display: inline;
      margin-right: 1px;
      min-height: 20px;
      padding: 15px 3px 15px 1px;
    }

    tab-strip >
        tab-strip-label:not([enabled]) {
      color: rgb(128, 128, 128);
    }

    tab-strip > tab-strip-label[selected] {
      background-color: white;
      border: 1px solid rgb(163, 163, 163);
      border-left: none;
      padding: 14px 2px 14px 1px;
    }

    #active_panel_container {
      overflow: auto;
    }
    </style>

    <tr-ui-b-drag-handle id="side_panel_drag_handle"></tr-ui-b-drag-handle>
    <active-panel-container id="active_panel_container">
    </active-panel-container>
    <tab-strip id="tab_strip"></tab-strip>
  </template>
</dom-module><dom-module id="tr-ui-timeline-view-help-overlay">
  <template>
    <style>
    :host {
      flex: 1 1 auto;
      flex-direction: row;
      display: flex;
      width: 700px;
    }
    .column {
      width: 50%;
    }
    h2 {
      font-size: 1.2em;
      margin: 0;
      margin-top: 5px;
      text-align: center;
    }
    h3 {
      margin: 0;
      margin-left: 126px;
      margin-top: 10px;
    }
    .pair {
      flex: 1 1 auto;
      flex-direction: row;
      display: flex;
    }
    .command {
      font-family: monospace;
      margin-right: 5px;
      text-align: right;
      width: 150px;
    }
    .action {
      font-size: 0.9em;
      text-align: left;
      width: 200px;
    }
    tr-ui-b-mouse-mode-icon {
      border: 1px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
      display: inline-block;
      margin-right: 1px;
      position: relative;
      top: 4px;
    }
    .mouse-mode-icon.pan-mode {
      background-position: -1px -11px;
    }
    .mouse-mode-icon.select-mode {
      background-position: -1px -41px;
    }
    .mouse-mode-icon.zoom-mode {
      background-position: -1px -71px;
    }
    .mouse-mode-icon.timing-mode {
      background-position: -1px -101px;
    }
    </style>
    <div class="column left">
      <h2>Navigation</h2>
      <div class="pair">
        <div class="command">w/s</div>
        <div class="action">Zoom in/out (+shift: faster)</div>
      </div>

      <div class="pair">
        <div class="command">a/d</div>
        <div class="action">Pan left/right (+shift: faster)</div>
      </div>

      <div class="pair">
        <div class="command">→/shift-TAB</div>
        <div class="action">Select previous event</div>
      </div>

      <div class="pair">
        <div class="command">←/TAB</div>
        <div class="action">Select next event</div>
      </div>

      <h2>Mouse Controls</h2>
      <div class="pair">
        <div class="command">click</div>
        <div class="action">Select event</div>
      </div>
      <div class="pair">
        <div class="command">alt-mousewheel</div>
        <div class="action">Zoom in/out</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="SELECTION"></tr-ui-b-mouse-mode-icon>
        Select mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Box select</div>
      </div>

      <div class="pair">
        <div class="command"><span class="mod"></span>-click/drag</div>
        <div class="action">Add events to the current selection</div>
      </div>

      <div class="pair">
        <div class="command">double click</div>
        <div class="action">Select all events with same title</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="PANSCAN"></tr-ui-b-mouse-mode-icon>
        Pan mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Pan the view</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="ZOOM"></tr-ui-b-mouse-mode-icon>
        Zoom mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Zoom in/out by dragging up/down</div>
      </div>

      <h3>
        <tr-ui-b-mouse-mode-icon mode-name="TIMING"></tr-ui-b-mouse-mode-icon>
        Timing mode
      </h3>
      <div class="pair">
        <div class="command">drag</div>
        <div class="action">Create or move markers</div>
      </div>

      <div class="pair">
        <div class="command">double click</div>
        <div class="action">Set marker range to slice</div>
      </div>
    </div>

    <div class="column right">
      <h2>General</h2>
      <div class="pair">
        <div class="command">1-4</div>
        <div class="action">Switch mouse mode</div>
      </div>

      <div class="pair">
        <div class="command">shift</div>
        <div class="action">Hold for temporary select</div>
      </div>

      <div class="pair">
        <div class="command">space</div>
        <div class="action">Hold for temporary pan</div>
      </div>

      <div class="pair">
        <div class="command">/</div>
        <div class="action">Search</div>
      </div>

      <div class="pair">
        <div class="command">enter</div>
        <div class="action">Step through search results</div>
      </div>

      <div class="pair">
        <div class="command">f</div>
        <div class="action">Zoom into selection</div>
      </div>

      <div class="pair">
        <div class="command">z/0</div>
        <div class="action">Reset zoom and pan</div>
      </div>

      <div class="pair">
        <div class="command">g/G</div>
        <div class="action">Toggle 60hz grid</div>
      </div>

      <div class="pair">
        <div class="command">v</div>
        <div class="action">Highlight VSync</div>
      </div>

      <div class="pair">
        <div class="command">h</div>
        <div class="action">Toggle low/high details</div>
      </div>

      <div class="pair">
        <div class="command">m</div>
        <div class="action">Mark current selection</div>
      </div>

      <div class="pair">
        <div class="command">p</div>
        <div class="action">Select power samples over current selection interval</div>
      </div>

      <div class="pair">
        <div class="command">`</div>
        <div class="action">Show or hide the scripting console</div>
      </div>

      <div class="pair">
        <div class="command">?</div>
        <div class="action">Show help</div>
      </div>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-timeline-view-metadata-overlay">
  <template>
    <style>
    :host {
      width: 700px;

      overflow: auto;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-timeline-view">
  <template>
    <style>
    :host {
      flex-direction: column;
      cursor: default;
      display: flex;
      font-family: sans-serif;
      padding: 0;
    }

    #control {
      background-color: #e6e6e6;
      background-image: -webkit-gradient(linear, 0 0, 0 100%,
          from(#E5E5E5), to(#D1D1D1));
      flex: 0 0 auto;
      overflow-x: auto;
    }

    #control::-webkit-scrollbar { height: 0px; }

    #control > #bar {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      margin: 1px;
    }

    #control > #bar > #title {
      display: flex;
      align-items: center;
      padding-left: 8px;
      padding-right: 8px;
      flex: 1 1 auto;
      overflow: hidden;
      white-space: nowrap;
    }

    #control > #bar > #left_controls,
    #control > #bar > #right_controls {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex-shrink: 0;
    }

    #control > #bar > #left_controls > * { margin-right: 2px; }
    #control > #bar > #right_controls > * { margin-left: 2px; }
    #control > #collapsing_controls { display: flex; }

    middle-container {
      flex: 1 1 auto;
      flex-direction: row;
      border-bottom: 1px solid #8e8e8e;
      display: flex;
      min-height: 0;
    }

    middle-container ::content track-view-container {
      flex: 1 1 auto;
      display: flex;
      min-height: 0;
      min-width: 0;
      overflow-x: hidden;
    }

    middle-container ::content track-view-container > * { flex: 1 1 auto; }
    middle-container > x-timeline-view-side-panel-container { flex: 0 0 auto; }
    tr-ui-b-drag-handle { flex: 0 0 auto; }
    tr-ui-a-analysis-view { flex: 0 0 auto; }

    tr-ui-b-dropdown {
      --dropdown-button: {
        -webkit-appearance: none;
        align-items: normal;
        background-color: rgb(248, 248, 248);
        border: 1px solid rgba(0, 0, 0, 0.5);
        box-sizing: content-box;
        color: rgba(0, 0, 0, 0.8);
        font-family: sans-serif;
        font-size: 12px;
        padding: 2px 5px;
      }
    }
    </style>

    <tv-ui-b-hotkey-controller id="hkc"></tv-ui-b-hotkey-controller>
    <div id="control">
      <div id="bar">
        <div id="left_controls"></div>
        <div id="title">^_^</div>
        <div id="right_controls">
          <tr-ui-b-dropdown id="flow_event_filter_dropdown" label="Flow events"></tr-ui-b-dropdown>
          <tr-ui-b-dropdown id="process_filter_dropdown" label="Processes"></tr-ui-b-dropdown>
          <tr-ui-b-toolbar-button id="view_metadata_button">
            M
          </tr-ui-b-toolbar-button>
          <tr-ui-b-dropdown id="view_options_dropdown" label="View Options"></tr-ui-b-dropdown>
          <tr-ui-find-control id="view_find_control"></tr-ui-find-control>
          <tr-ui-b-toolbar-button id="view_console_button">
            »
          </tr-ui-b-toolbar-button>
          <tr-ui-b-toolbar-button id="view_help_button">
            ?
          </tr-ui-b-toolbar-button>
        </div>
      </div>
      <div id="collapsing_controls"></div>
      <tr-ui-b-info-bar-group id="import-warnings">
      </tr-ui-b-info-bar-group>
      <tr-ui-b-info-bar-group id="polyfill-warning">
      </tr-ui-b-info-bar-group>
    </div>
    <middle-container>
      <slot></slot>

      <tr-ui-side-panel-container id="side_panel_container">
      </tr-ui-side-panel-container>
    </middle-container>
    <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
    <tr-ui-a-analysis-view id="analysis"></tr-ui-a-analysis-view>

    <tr-v-ui-preferred-display-unit id="display_unit">
    </tr-v-ui-preferred-display-unit>
  </template>
</dom-module><style>
x-profiling-view {
  flex-direction: column;
  display: flex;
  padding: 0;
}

x-profiling-view .controls #save-button {
  margin-left: 64px !important;
}

x-profiling-view > tr-ui-timeline-view {
  flex: 1 1 auto;
  min-height: 0;
}

.report-id-message {
  -webkit-user-select: text;
}

x-timeline-view-buttons {
  display: flex;
  align-items: center;
}
</style><template id="profiling-view-template">
  <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group>
  <x-timeline-view-buttons>
    <button id="record-button">Record</button>
    <button id="save-button">Save</button>
    <button id="load-button">Load</button>
  </x-timeline-view-buttons>
  <tr-ui-timeline-view>
    <track-view-container id="track_view_container"></track-view-container>
  </tr-ui-timeline-view>
</template><dom-module id="tr-ui-e-chrome-cc-display-item-list-item">
  <template>
    <style>
      :host {
        border-bottom: 1px solid #555;
        display: block;
        font-size: 12px;
        padding: 3px 5px;
      }

      :host(:hover) {
        background-color: #f0f0f0;
        cursor: pointer;
      }

      .header {
        font-weight: bold;
        margin: 2px 0;
      }

      .header > .extra {
        background-color: #777;
        border-radius: 4px;
        color: white;
        margin: 0 6px;
        text-decoration: none;
        padding: 2px 4px;
      }

      .raw-details {
        white-space: pre-wrap;
      }

      .details > dl {
        margin: 0;
      }

      :host(:not([selected])) .details {
        display: none;
      }
    </style>
    <div class="header">
      {{name}}
      <template if="{{_computeIfSKP(richDetails)}}" is="dom-if">
        <a class="extra" download="drawing.skp" href$="{{_computeHref(richDetails)}}" on-click="{{stopPropagation}}">SKP</a>
      </template>
    </div>
    <div class="details">
      <template if="{{rawDetails}}" is="dom-if">
        <div class="raw-details">{{rawDetails}}</div>
      </template>
      <template if="{{richDetails}}" is="dom-if">
        <dl>
          <template if="{{richDetails.visualRect}}" is="dom-if">
            <dt>Visual rect</dt>
            <dd>{{richDetails.visualRect.x}},{{richDetails.visualRect.y}}
                {{richDetails.visualRect.width}}×{{richDetails.visualRect.height}}
            </dd>
          </template>
        </dl>
      </template>
    </div>
  </template>

</dom-module><template id="tr-ui-e-chrome-cc-display-item-debugger-template">
  <left-panel>
    <display-item-info>
      <header>
  <!-- WebComponents V0 origin trial token for https://*.ui.perfetto.dev
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AjGFDFU57Af4e5OJJQd7kmYR0nEiObDCHkev6BBWzhGohACl1ri+pMhaVe9V8dDBaXDkWy4g7WYj3c5GiPwatgIAAABreyJvcmlnaW4iOiJodHRwczovL3VpLnBlcmZldHRvLmRldjo0NDMiLCJmZWF0dXJlIjoiV2ViQ29tcG9uZW50c1YwIiwiZXhwaXJ5IjoxNjEyMjIzOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">

  <!-- WebComponents V0 origin trial token for http://localhost:10000
  Expires 28 Jan 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AicMEv5glMGL1lq6ZRsxFJj8xlhn3XDYZrHK0/2KreAD/r62vTFjUBOueeMTxWuU1IlRXqCugRFDD7rY45YEgwkAAABTeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjEwMDAwIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMTg0MDczNH0=">

  <!-- WebComponents V0 origin trial token for https://staging-dot-perfetto-ui.appspot.com
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="Au1cwnWfBB/GCD22HnNZE93/KamhGDsz8BZbEewICJB2PRtW+E1bobrtZbTZs8q5748uRiKXPvgaut5JOZ8jSw4AAABseyJvcmlnaW4iOiJodHRwczovL3N0YWdpbmctZG90LXBlcmZldHRvLXVpLmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJDb21wb25lbnRzVjAiLCJleHBpcnkiOjE2MTIyMjM5OTl9">

  <!-- WebComponents V0 origin trial token for https://storage.googleapis.com/
  Expires 1 Feb 2021. https://crbug.com/1021137. -->
  <meta http-equiv="origin-trial" content="AtobKUpdVFIb6cx2Ev0EbAFX4SzLuXPnsnADRA8JV5w4B64q65gz42shquyLLNd2QP9rY22oNGxbatpTO0kd2AIAAABfeyJvcmlnaW4iOiJodHRwczovL3N0b3JhZ2UuZ29vZ2xlYXBpcy5jb206NDQzIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMjIyMzk5OX0=">
        <span class="title">Display Item List</span>
        <span class="size"></span>
        <div class="export">
          <input class="dlfilename" type="text" value="displayitemlist.json"/>
          <button class="dlexport">Export display item list</button>
        </div>
        <div class="export">
          <input class="skpfilename" type="text" value="skpicture.skp"/>
          <button class="skpexport">Export list as SkPicture</button>
        </div>
      </header>
    </display-item-info>
  </left-panel>
  <right-panel>
    <raster-area>
      <canvas-scroller>
        <canvas></canvas>
      </canvas-scroller>
    </raster-area>
  </right-panel>
</template><template id="quad-stack-view-template">
  <style>
  #chrome-left {
    background-image: url();
    display: none;
  }
  #chrome-mid {
    background-image: url();
    display: none;
  }
  #chrome-right {
    background-image: url();
    display: none;
  }
  </style>

  <div id="header"></div>
  <input id="stacking-distance-slider" max="400" min="1" step="1" type="range"/>
  
  <div id="canvas-scroller">
    <canvas id="canvas"></canvas>
  </div>
  <img id="chrome-left"/>
  <img id="chrome-mid"/>
  <img id="chrome-right"/>
</template><template id="tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template">
  <style>
  #input-event {
    background-image: url();
    display: none;
  }
  </style>
  <img id="input-event"/>
</template><template id="tr-ui-e-chrome-cc-picture-debugger-template">
  <left-panel>
    <picture-info>
      <div>
        <span class="title">Skia Picture</span>
        <span class="size"></span>
      </div>
      <div>
        <input class="filename" type="text" value="skpicture.skp"/>
        <button class="export">Export</button>
      </div>
    </picture-info>
  </left-panel>
  <right-panel>
    <tr-ui-e-chrome-cc-picture-ops-chart-view>
    </tr-ui-e-chrome-cc-picture-ops-chart-view>
    <raster-area><canvas></canvas></raster-area>
  </right-panel>
</template><dom-module id="tr-ui-e-chrome-cc-raster-task-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #heading {
      flex: 0 0 auto;
    }
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>

    <div id="heading">
      Rasterization costs in
      <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
    </div>
    <tr-ui-b-table id="content"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-e-chrome-codesearch">
  <template>
    <style>
      :host {
        white-space: nowrap;
      }
      #codesearchLink {
        font-size: x-small;
        margin-left: 20px;
        text-decoration: none;
      }
    </style>
    <a id="codesearchLink" on-click="onClick" target="_blank">🔍</a>
  </template>
</dom-module><style>
.tr-ui-e-chrome-gpu-state-snapshot-view{background:url();display:flex;overflow:auto}.tr-ui-e-chrome-gpu-state-snapshot-view img{display:block;margin:16px auto 16px auto}
</style><dom-module id="tr-ui-a-layout-tree-sub-view">
  <template>
    <style>
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>
    <div id="content"></div>
  </template>
</dom-module><template id="tr-ui-e-img-image-snapshot-view-template">
  <style>
    .image-info {
      margin-bottom: 5px;
    }

    .image-info .title {
      font-weight: bold;
      margin-left: 5px;
      margin-right: 5px;
    }

    .image-info .size {
      margin-right: 5px;
    }

    .image-container {
      min-height: 100px;
      min-width: 200px;
      overflow: auto;
    }
  </style>

  <div class="image-info">
    <span class="title">Image</span>
    <span class="size">(unknown)</span>
    <span class="instructions">
      [ Drag with mouse to zoom in and out ]
    </span>
  </div>
  <div class="image-container">
    <img alt="Image snapshot"/>
  </div>
</template><dom-module id="tr-ui-e-s-frame-data-side-panel">
  <template>
    <style>
    :host {
      display: flex;
      width: 600px;
      flex-direction: column;
    }
    table-container {
      display: flex;
      overflow: auto;
      font-size: 12px;
    }
    </style>
    <div>
      Organize by:
      <select id="select">
        <option value="none">None</option>
        <option value="tree">Frame Tree</option>
      </select>
    </div>
    <table-container>
      <tr-ui-b-table id="table"></tr-ui-b-table>
    </table-container>
  </template>
</dom-module><dom-module id="tr-ui-e-s-input-latency-side-panel">
  <template>
    <style>
    :host {
      flex-direction: column;
      display: flex;
    }
    toolbar {
      flex: 0 0 auto;
      border-bottom: 1px solid black;
      display: flex;
    }
    result-area {
      flex: 1 1 auto;
      display: block;
      min-height: 0;
      overflow-y: auto;
    }
    </style>

    <toolbar id="toolbar"></toolbar>
    <result-area id="result_area"></result-area>
  </template>
</dom-module><style>
.tr-ui-e-system-stats-instance-track{height:500px}.tr-ui-e-system-stats-instance-track ul{list-style:none;list-style-position:outside;margin:0;overflow:hidden}
</style><style>
.tr-ui-e-system-stats-snapshot-view .subhead{font-size:small;padding-bottom:10px}.tr-ui-e-system-stats-snapshot-view ul{background-position:0 5px;background-repeat:no-repeat;cursor:pointer;font-family:monospace;list-style:none;margin:0;padding-left:15px}.tr-ui-e-system-stats-snapshot-view li{background-position:0 5px;background-repeat:no-repeat;cursor:pointer;list-style:none;margin:0;padding-left:15px}
</style><dom-module id="tr-ui-e-v8-gc-objects-stats-table">
  <template>
    <style>
    tr-ui-b-table {
      flex: 0 0 auto;
      align-self: stretch;
      margin-top: 1em;
      font-size: 12px;
    }
    .diff {
      display: inline-block;
      margin-top: 1em;
      margin-left: 0.8em;
    }
    </style>
    <div class="diff" id="diffOption">
      Diff
    </div>
    <tr-ui-b-table id="diffTable"></tr-ui-b-table>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-e-multi-v8-gc-stats-thread-slice-sub-view">
  <template>
    <style>
    </style>
    <tr-ui-e-v8-gc-objects-stats-table id="gcObjectsStats">
    </tr-ui-e-v8-gc-objects-stats-table>
  </template>
</dom-module><dom-module id="tr-ui-e-v8-ic-stats-table">
  <template>
    <style>
    tr-ui-b-table {
      flex: 0 0 auto;
      align-self: stretch;
      margin-top: 1em;
      font-size: 12px;
    }
    #total {
      margin-top: 1em;
      margin-left: 0.8em;
    }
    #groupOption {
      display: inline-block;
      margin-top: 1em;
      margin-left: 0.8em;
    }
    </style>
    <div style="padding-right: 200px">
      <div style="float:right;  border-style: solid; border-width: 1px; padding:20px">
        X no feedback<br/>
        0 uninitialized<br/>
        . premonomorphic<br/>
        1 monomorphic<br/>
        ^ recompute handler<br/>
        P polymorphic<br/>
        N megamorphic<br/>
        G generic
      </div>
    </div>
    <div id="total">
    </div>
    <div id="groupOption">
      Group Key
    </div>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-e-multi-v8-ic-stats-thread-slice-sub-view">
  <template>
    <tr-ui-e-v8-ic-stats-table id="table">
    </tr-ui-e-v8-ic-stats-table>
  </template>
</dom-module><dom-module id="tr-ui-e-v8-runtime-call-stats-table">
  <template>
    <style>
    #table, #blink_rcs_table {
      flex: 0 0 auto;
      align-self: stretch;
      margin-top: 1em;
      font-size: 12px;
    }

    #v8_rcs_heading, #blink_rcs_heading {
        padding-top: 1em;
        font-size: 18px;
    }
    </style>
    <h1 id="v8_rcs_heading"></h1>
    <tr-ui-b-table id="table"></tr-ui-b-table>
    <h1 id="blink_rcs_heading"></h1>
    <tr-ui-b-table id="blink_rcs_table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-e-multi-v8-thread-slice-sub-view">
  <template>
    <tr-ui-a-multi-thread-slice-sub-view id="content"></tr-ui-a-multi-thread-slice-sub-view>
    <tr-ui-e-v8-runtime-call-stats-table id="runtimeCallStats"></tr-ui-e-v8-runtime-call-stats-table>
  </template>
</dom-module><dom-module id="tr-ui-e-single-v8-gc-stats-thread-slice-sub-view">
  <template>
    <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
    <tr-ui-e-v8-gc-objects-stats-table id="gcObjectsStats"></tr-ui-e-v8-gc-objects-stats-table>
  </template>
</dom-module><dom-module id="tr-ui-e-single-v8-ic-stats-thread-slice-sub-view">
  <template>
    <tr-ui-e-v8-ic-stats-table id="table">
    </tr-ui-e-v8-ic-stats-table>
  </template>
</dom-module><dom-module id="tr-ui-e-single-v8-thread-slice-sub-view">
  <template>
    <tr-ui-a-single-thread-slice-sub-view id="content"></tr-ui-a-single-thread-slice-sub-view>
    <tr-ui-e-v8-runtime-call-stats-table id="runtimeCallStats"></tr-ui-e-v8-runtime-call-stats-table>
  </template>
</dom-module><dom-module id="tr-ui-b-grouping-table">
  <template>
    <style>
    :host {
      display: flex;
    }
    #table {
      flex: 1 1 auto;
      font-size: 12px;
    }
    </style>
    <tr-ui-b-table id="table"></tr-ui-b-table>
  </template>
</dom-module><dom-module id="tr-ui-b-grouping-table-groupby-picker">
  <template>
    <style>
    #container {
      display: flex;
    }
    #container *:not(:first-child) {
      padding-left: 3px;
      border-left: 1px solid black;
      margin-left: 3px;
    }
    </style>

    <div id="container"></div>
  </template>
</dom-module><dom-module id="tr-ui-b-grouping-table-groupby-picker-group">
  <template>
    <style>
    :host {
      white-space: nowrap;
    }
    #left, #right {
      user-select: none;
      cursor: pointer;
    }
    </style>

    <span id="left" on-click="moveLeft_">◀</span>
    <input id="enabled" on-change="onEnableChanged_" type="checkbox"/>
    <label for="enabled" id="label"></label>
    <span id="right" on-click="moveRight_">▶</span>
  </template>
</dom-module><dom-module id="tr-ui-sp-file-size-stats-side-panel">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    toolbar {
      align-items: center;
      background-color: rgb(236, 236, 236);
      border-bottom: 1px solid #8e8e8e;
      display: flex;
      flex-direction: row;
      flex-direction: row;
      flex: 0 0 auto;
      font-size: 12px;
      padding: 0 10px 0 10px;
    }
    table-container {
      display: flex;
      min-height: 0px;
      overflow-y: auto;
    }
    </style>

    <toolbar>
      <span><b>Group by:</b></span>
      <tr-ui-b-grouping-table-groupby-picker id="picker">
      </tr-ui-b-grouping-table-groupby-picker>
    </toolbar>
    <table-container>
      <tr-ui-b-grouping-table id="table"></tr-ui-b-grouping-table>
    </table-container>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-set-controls-export">
  <template>
    <style>
    :host {
      display: grid;
      grid-gap: 1em;
      grid-template-rows: auto auto;
      grid-template-columns: auto auto;
    }
    button {
      -webkit-appearance: none;
      border: 0;
      font-size: initial;
      padding: 5px;
    }
    </style>

    <button on-tap="exportRawCsv_">raw CSV</button>
    <button on-tap="exportRawJson_">raw JSON</button>
    <button on-tap="exportMergedCsv_">merged CSV</button>
    <button on-tap="exportMergedJson_">merged JSON</button>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-set-controls">
  <template>
    <style>
    :host {
      display: block;
    }

    #help, #feedback {
      display: none;
      margin-left: 20px;
    }

    #search_container {
      display: inline-flex;
      margin-right: 20px;
      padding-bottom: 1px;
      border-bottom: 1px solid darkgrey;
    }

    #search {
      border: 0;
      max-width: 20em;
      outline: none;
    }

    #clear_search {
      visibility: hidden;
      height: 1em;
      stroke: black;
      stroke-width: 16;
    }

    #controls {
      white-space: nowrap;
    }

    #show_overview, #hide_overview {
      height: 1em;
      margin-right: 20px;
    }

    #show_overview {
      stroke: blue;
      stroke-width: 16;
    }

    #show_overview:hover {
      background: blue;
      stroke: white;
    }

    #hide_overview {
      display: none;
      stroke-width: 18;
      stroke: black;
    }

    #hide_overview:hover {
      background: black;
      stroke: white;
    }

    #reference_display_label {
      display: none;
      margin-right: 20px;
    }

    #alpha, #alpha_slider_container {
      display: none;
    }

    #alpha {
      margin-right: 20px;
    }

    #alpha_slider_container {
      background: white;
      border: 1px solid black;
      flex-direction: column;
      padding: 0.5em;
      position: absolute;
      z-index: 10; /* scalar-span uses z-index :-( */
    }

    #alpha_slider {
      -webkit-appearance: slider-vertical;
      align-self: center;
      height: 200px;
      width: 30px;
    }

    #statistic {
      display: none;
      margin-right: 20px;
    }

    #show_visualization {
      margin-right: 20px;
    }

    #export {
      margin-right: 20px;
    }
    </style>

    <div id="controls">
      <span id="search_container">
        <input id="search" placeholder="Find Histogram name" value="{{searchQuery::keyup}}"/>
        <svg id="clear_search" on-tap="clearSearch_" viewBox="0 0 128 128">
          <g>
          <title>Clear search</title>
          <line x1="28" x2="100" y1="28" y2="100"></line>
          <line x1="28" x2="100" y1="100" y2="28"></line>
          </g>
        </svg>
      </span>

      <svg id="show_overview" on-tap="toggleOverviewLineCharts_" viewBox="0 0 128 128">
        <g>
        <title>Show overview charts</title>
        <line x1="19" x2="49" y1="109" y2="49"></line>
        <line x1="49" x2="79" y1="49" y2="79"></line>
        <line x1="79" x2="109" y1="79" y2="19"></line>
        </g>
      </svg>
      <svg id="hide_overview" on-tap="toggleOverviewLineCharts_" viewBox="0 0 128 128">
        <g>
        <title>Hide overview charts</title>
        <line x1="28" x2="100" y1="28" y2="100"></line>
        <line x1="28" x2="100" y1="100" y2="28"></line>
        </g>
      </svg>

      <select id="reference_display_label" value="{{referenceDisplayLabel::change}}">
        <option value="">Select a reference column</option>
      </select>

      <button id="alpha" on-tap="openAlphaSlider_">α=[[alphaString]]</button>
      <div id="alpha_slider_container">
        <input id="alpha_slider" max="18" min="0" on-blur="closeAlphaSlider_" on-input="updateAlpha_" type="range" value="{{alphaIndex::change}}"/>
      </div>

      <select id="statistic" value="{{displayStatisticName::change}}">
      </select>

      <button id="show_visualization" on-tap="loadVisualization_">Visualize</button>

      <tr-ui-b-dropdown label="Export">
        <tr-v-ui-histogram-set-controls-export>
        </tr-v-ui-histogram-set-controls-export>
      </tr-ui-b-dropdown>

      <input checked="{{showAll::change}}" id="show_all" title="When unchecked, less important histograms are hidden." type="checkbox"/>
      <label for="show_all" title="When unchecked, less important histograms are hidden.">Show all</label>

      <a id="help">Help</a>
      <a id="feedback">Feedback</a>
    </div>

    <tr-ui-b-grouping-table-groupby-picker id="picker">
    </tr-ui-b-grouping-table-groupby-picker>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-set-table-cell">
  <template>
    <style>
    #histogram_container {
      display: flex;
      flex-direction: row;
    }

    #missing, #empty, #unmergeable, #scalar {
      flex-grow: 1;
    }

    #open_histogram, #close_histogram, #open_histogram svg, #close_histogram svg {
      height: 1em;
    }

    #open_histogram svg {
      margin-left: 4px;
      stroke-width: 0;
      stroke: blue;
      fill: blue;
    }
    :host(:hover) #open_histogram svg {
      background: blue;
      stroke: white;
      fill: white;
    }

    #scalar {
      flex-grow: 1;
      white-space: nowrap;
    }

    #histogram {
      flex-grow: 1;
    }

    #close_histogram svg line {
      stroke-width: 18;
      stroke: black;
    }
    #close_histogram:hover svg {
      background: black;
    }
    #close_histogram:hover svg line {
      stroke: white;
    }

    #overview_container {
      display: none;
    }
    </style>

    <div id="histogram_container">
      <span id="missing">(missing)</span>
      <span id="empty">(empty)</span>
      <span id="unmergeable">(unmergeable)</span>

      <tr-v-ui-scalar-span id="scalar" on-click="openHistogram_"></tr-v-ui-scalar-span>

      <span id="open_histogram" on-click="openHistogram_">
        <svg viewBox="0 0 128 128">
          <rect height="16" width="32" x="16" y="24"></rect>
          <rect height="16" width="96" x="16" y="56"></rect>
          <rect height="16" width="64" x="16" y="88"></rect>
        </svg>
      </span>

      <span id="histogram"></span>

      <span id="close_histogram" on-click="closeHistogram_">
        <svg viewBox="0 0 128 128">
          <line x1="28" x2="100" y1="28" y2="100"></line>
          <line x1="28" x2="100" y1="100" y2="28"></line>
        </svg>
      </span>
    </div>

    <div id="overview_container">
    </div>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-set-table-name-cell">
  <template>
    <style>
    #name_container {
      display: flex;
    }

    #name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    #show_overview, #hide_overview, #show_overview svg, #hide_overview svg {
      height: 1em;
      margin-left: 5px;
    }

    #show_overview svg {
      stroke: blue;
      stroke-width: 16;
    }

    #show_overview:hover svg {
      background: blue;
      stroke: white;
    }

    #hide_overview {
      display: none;
    }

    #hide_overview svg {
      stroke-width: 18;
      stroke: black;
    }

    #hide_overview:hover svg {
      background: black;
      stroke: white;
    }

    #open_histograms, #close_histograms, #open_histograms svg, #close_histograms svg {
      height: 1em;
    }

    #close_histograms {
      display: none;
    }

    #open_histograms svg {
      margin-left: 4px;
      stroke-width: 0;
      stroke: blue;
      fill: blue;
    }
    #open_histograms:hover svg {
      background: blue;
      stroke: white;
      fill: white;
    }

    #close_histograms line {
      stroke-width: 18;
      stroke: black;
    }
    #close_histograms:hover {
      background: black;
    }
    #close_histograms:hover line {
      stroke: white;
    }

    #overview_container {
      display: none;
    }
    </style>

    <div id="name_container">
      <span id="name"></span>

      <span id="show_overview" on-click="showOverview_">
        <svg viewBox="0 0 128 128">
          <line x1="19" x2="49" y1="109" y2="49"></line>
          <line x1="49" x2="79" y1="49" y2="79"></line>
          <line x1="79" x2="109" y1="79" y2="19"></line>
        </svg>
      </span>

      <span id="hide_overview" on-click="hideOverview_">
        <svg viewBox="0 0 128 128">
          <line x1="28" x2="100" y1="28" y2="100"></line>
          <line x1="28" x2="100" y1="100" y2="28"></line>
        </svg>
      </span>

      <span id="open_histograms" on-click="openHistograms_">
        <svg viewBox="0 0 128 128">
          <rect height="16" width="32" x="16" y="24"></rect>
          <rect height="16" width="96" x="16" y="56"></rect>
          <rect height="16" width="64" x="16" y="88"></rect>
        </svg>
      </span>

      <span id="close_histograms" on-click="closeHistograms_">
        <svg viewBox="0 0 128 128">
          <line x1="28" x2="100" y1="28" y2="100"></line>
          <line x1="28" x2="100" y1="100" y2="28"></line>
        </svg>
      </span>
    </div>

    <div id="overview_container">
    </div>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-set-table">
  <template>
    <style>
    :host {
      min-height: 0px;
      overflow: auto;
    }
    #table {
      margin-top: 5px;
    }
    </style>

    <tr-ui-b-table id="table">
  </tr-ui-b-table></template>
</dom-module><dom-module id="tr-v-ui-metrics-visualization">
  <template>
    <style>
      button {
        padding: 5px;
        font-size: 14px;
      }

      .text_input {
        width: 50px;
        padding: 4px;
        font-size: 14px;
      }

      .error {
        color: red;
        display: none;
      }

      .container {
        position: relative;
        display: inline-block;
        margin-left: 15px;
      }

      #title {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 5px;
      }

      #selectors {
        display: block;
        padding-bottom: 10px;
      }

      #search_page {
        width: 200px;
        margin-left: 30px;
      }

      #close {
        display: none;
        vertical-align: top;
      }

      #close svg{
        height: 1em;
      }

      #close svg line {
        stroke-width: 18;
        stroke: black;
      }

      #close:hover svg {
        background: black;
      }

      #close:hover svg line {
        stroke: white;
      }
    </style>
      <span class="container" id="aggregateContainer">
      </span>
      <span class="container" id="pageByPageContainer">
        <span id="selectors">
          <span id="percentile_label">Percentile Range:</span>
          <input class="text_input" id="start" placeholder="0"/>
          <input class="text_input" id="end" placeholder="100"/>
          <button id="filter" on-tap="filterByPercentile_">Filter</button>
          <input class="text_input" id="search_page" placeholder="Page Name"/>
          <button id="search" on-tap="searchByPage_">Search</button>
          <span class="error" id="search_error">Sorry, could not find that page!</span>
        </span>
      </span>
      <div display="block" id="submetricsContainer">
        <span id="close">
          <svg viewBox="0 0 128 128">
            <line x1="28" x2="100" y1="28" y2="100"></line>
            <line x1="28" x2="100" y1="100" y2="28"></line>
          </svg>
        </span>
      </div>
  </template>
</dom-module><dom-module id="tr-v-ui-raster-visualization">
  <template>
    <style>
      button {
        padding: 5px;
        font-size: 14px;
      }
      .error {
        color: red;
        display: none;
      }

      .text_input {
        width: 200px;
        padding: 4px;
        font-size: 14px;
      }

      .selector_container{
        padding: 5px;
      }

      #search {
        display: inline-block;
        padding-bottom: 10px;
      }

      #search_page {
        width: 200px;
      }

      #pageSelector {
        display: inline-block;
        font-size: 12pt;
      }

      #close {
        display: none;
        vertical-align: top;
      }

      #close svg{
        height: 1em;
      }

      #close svg line {
        stroke-width: 18;
        stroke: black;
      }

      #close:hover svg {
        background: black;
      }

      #close:hover svg line {
        stroke: white;
      }
    </style>
    <span id="aggregateContainer">
      <div>
        <div class="selector_container">
          <span id="select_page_label">Individual Page Results:</span>
          <select id="pageSelector">
            <option id="select_page" value="">Select a page</option>
          </select>
        </div>
        <div class="selector_container">
          <div id="search_page_label">Search for a page:</div>
          <input class="text_input" id="search_page" placeholder="Page Name"/>
          <button id="search_button">Search</button>
          <div class="error" id="search_error">Sorry, could not find that page!</div>
        </div>
      </div>
    </span>
    <span id="pageContainer">
      <span id="close">
          <svg viewBox="0 0 128 128">
            <line x1="28" x2="100" y1="28" y2="100"></line>
            <line x1="28" x2="100" y1="100" y2="28"></line>
          </svg>
        </span>
      </span>
  </template>
</dom-module><meta charset="utf-8"/><dom-module id="tr-v-ui-visualizations-data-container">
  <template>
    <style>
      .error {
        color: red;
        display: none;
      }

      .sample{
        display: none;
      }

      .subtitle{
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 5px;
      }

      .description{
        font-size: 15px;
        padding-bottom: 5px;
      }

      #title {
        font-size: 30px;
        font-weight: bold;
        padding-bottom: 5px;
      }
    </style>
    <div id="title">Visualizations</div>
    <div class="error" id="data_error">Invalid data provided.</div>
    <div id="pipeline_per_frame_container">
      <div class="subtitle">Graphics Pipeline and Raster Tasks</div>
      <div class="description">
        When raster tasks are completed in comparison to the rest of the graphics pipeline.<br/>
        Only pages where raster tasks are completed after beginFrame is issued are included.
      </div>
      <tr-v-ui-raster-visualization id="rasterVisualization">
      </tr-v-ui-raster-visualization>
    </div>
    <div id="metrics_container">
      <div class="subtitle">Metrics</div>
      <div class="description">Total amount of time taken for the indicated metrics.</div>
      <tr-v-ui-metrics-visualization class="sample" id="metricsVisualization">
      </tr-v-ui-metrics-visualization>
    </div>
  </template>
</dom-module><dom-module id="tr-v-ui-histogram-set-view">
  <template>
    <style>
    :host {
      font-family: sans-serif;
    }

    #zero {
      color: red;
      /* histogram-set-table is used by both metrics-side-panel and results.html.
       * This font-size rule has no effect in results.html, but improves
       * legibility in the metrics-side-panel, which sets font-size in order to
       * make this table denser.
       */
      font-size: initial;
    }

    #container {
      display: none;
    }

    #visualizations{
      display: none;
    }
    </style>

    <div id="zero">zero Histograms</div>

    <div id="container">
      <tr-v-ui-histogram-set-controls id="controls">
      </tr-v-ui-histogram-set-controls>

      <tr-v-ui-visualizations-data-container id="visualizations">
      </tr-v-ui-visualizations-data-container>

      <tr-v-ui-histogram-set-table id="table"></tr-v-ui-histogram-set-table>
    </div>
  </template>
</dom-module><dom-module id="tr-ui-sp-metrics-side-panel">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    div#error {
      color: red;
    }
    #results {
      font-size: 12px;
    }
    </style>

    <top-left-controls id="top_left_controls"></top-left-controls>

    <tr-v-ui-histogram-set-view id="results"></tr-v-ui-histogram-set-view>

    <div id="error"></div>
  </template>
</dom-module><dom-module id="tr-ui-e-s-alerts-side-panel">
  <template>
    <style>
    :host {
      display: block;
      width: 250px;
    }
    #content {
      flex-direction: column;
      display: flex;
    }
    tr-ui-b-table {
      font-size: 12px;
    }
    </style>

    <div id="content">
      <toolbar id="toolbar"></toolbar>
      <result-area id="result_area"></result-area>
    </div>
  </template>
</dom-module><style>
html,body{height:100%}body{flex-direction:column;display:flex;margin:0;padding:0}body>x-profiling-view{flex:1 1 auto;min-height:0}body>x-profiling-view>x-timeline-view:focus{outline:0}
</style><script src="catapult_trace_viewer.js"></script>
</head>
  <body>
  </body>
</html>
